Universal Login

Auth0’s bread and butter was their pre-built login solution, Lock. As a customer, you could implement an entire login, sign up, and multi-factor authentication experience without needing to worry about developing a proper experience for your users. Since its conception in 2013 and with many feature additions over those years (and lots of duct tape), integrating new features was becoming increasingly difficult and time consuming for our engineering team. It was clear that continuing down this path would only continue to hold us back from being leaders of the IAM space, but finding the time and resources as such as fast growing company was difficult. What started as a small project to slowly rebuild the Lock experience eventually turned into one of the largest initiatives as a company.

The Universal Login team was created with the goal of building and maintaining our next generation login platform. Our goal was to build a light-weight, modernized, and easily customizable white-label login solution that would pave the way for standardized login solutions. We conveniently called this Universal Login — a login solution for all. For this project, our goals were to:

1. Provide the same set of features that Lock offers
2. Offer a light-weight experience with minimal javascript
3. Provide an easy-to-use no-code customization experience
4. Drive adoption of Universal Login as we better understand how to phase out Lock.

As the product designer of the Login team, I was in charge of design from end-to-end. Working with a product manager, engineering lead, and researcher, I would see through performing research, making suggestions for areas of improvements, and designing & testing of our newly crafted experiences.

When I joined Auth0 back in June of 2018, Universal Login had already been in development for several months, mostly led by a team of engineers and little design input. In its current state, it was being developed to replicate the existing Lock experience which in and of itself was built off of several assumptions (and no existing research to back it). My goal was to verify as much of this as quickly as possible so that we could push forward knowing we were heading down the right path.

This project focused on two main experiences:

1. The actual pre-built login experience
2. The customization experience within the dashboard.

Users

It was clear that the pre-built login experience would be seen and used by anyone and everyone. On the other hand, we defined that the customization experience from within the Auth0 dashboard would be used by our most common type of user, developers, but possibly product managers or even designers.

Research

We reached out to several customers, both large and small, who were currently making use of Lock. We explored how they have customized this experience to their brand, noting what was most commonly customized, and then finding the similarities across each of these customers. Our goals in talking with these customers was to understand the following:

1. How important is customization to them
2. What are their needs behind customization

Getting the answers to these questions would help us better understand the needs for both the end user experience as well as the customization experience.

Findings

It all came down to the size of the company. Smaller companies wanted to get their login experience set up and out the door as quickly as possible with low effort spent on applying their branding. Larger companies wanted more freedom to customize this experience so it completely felt like their own, even if this meant digging into code.

On top of this, we worked with the customer to devise a prioritized list of things they would like to be able to customize. This included some obvious ones such as a background image and company logo, but also included things like button styling, font family, etc.

Login box

Design of the Login prompts started with a component audit. Because we're creating a white-label product built to be customized, we had to ensure that it was as simple as possible all the while remaining elegant. We identified the set of components necessary to rebuild the original Lock experience, dropping unnecessary variants and ensuring we had reusable patterns. In a way, we built out a simple UI kit that we would strictly adhere to and identified which components would be customizable based on our customer’s needs.

Considering we're building a product that would be used by any and all end users, we had to ensure the experience was accessible for users with low vision, color blindness, motor, and other disabilities. I led efforts for ensuring this as part of building out the separate components and throughout the design process. Font sizes were kept to a minimum of 16px, except where text was not necessary to comprehend the experience. Colors were defined to meet WCAG 2.1 AA standards and used appropriately. I improved the text field design to always include a field label, unlike the previous Lock component, helping further create an experience usable by a screen reader. While other changes were made, we improved the accessibility compared to the previous Lock experience in just about every way possible.

Learn more about how accessibility played a major role in redesigning Universal Login here.

Customization

With the concept of low-code and no-code becoming increasingly popular amongst developer-focused products, our goals were to provide our customers with a customization solution that would allow their login box to feel like their own with minimal development knowledge necessary, but still offer the ability to customize pure CSS if needed. While we had much more grand ideas for the customization experience, we reduced scope for our initial release and prioritized component customization based on our customer’s needs: Logo image and position, background color/image, and a single primary color that would be used on elements such as buttons and links. This would allow us to provide a great experience for smaller companies while still offering more advanced customization through a custom style sheet.

Due to delays along the way, we were under pressure to get this released in its current state. At the time, this meant it was not yet at feature parity with Lock which we knew would greatly effect adoption. With the initial launch of Universal Login as a beta feature, we saw ~2% adoption within the first two weeks. This was low, but expected in its current state. For our users, there wasn’t a clear reason you would want to use something that doesn’t have the same features as the existing Lock experience. For example, we did not yet offer something called Home Realm Discovery — the process of identifying which identity provider a user belongs to prior to authentication.

Over the next several months, as Universal Login converged in feature parity with Lock (and after my departure from the Login team), it became the default experience for all new users. This simple change increased our adoption to ~10% after the first two weeks which was much more in line with our original expectations, but still left ~90% of our users to be migrated.